<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单词交互测试x3u4</title>
<style>
    body, html {
        height: 100%;
        margin: 0;
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
    }
    #content {
        text-align: center;
        width: 100%;
    }
    #word {
        font-family: Arial-Black, sans-serif;
        font-size: 36px;
        color: blue;
        margin-top: 20px;
    }
    .option {
        margin: 5px;
        padding: 10px;
        border: 2px solid #007BFF;
        border-radius: 5px;
        color: black;
        background-color: white;
        font-size: 16px;
        cursor: pointer;
        width: 300px;
        display: inline-block;
        transition: background-color 0.3s ease;
    }
    .option:hover {
        background-color: #f0f0f0;
    }
    #optionsContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #progressBar {
        width: 90%;
        background-color: #ddd;
        margin: 20px 0;
    }
    #progress {
        height: 20px;
        background-color: #4CAF50;
        width: 0%;
    }
    #stats {
        margin-top: 10px;
        font-size: 18px;
        color: #333;
    }
</style>
<script>
const words = {
    "heritage": "n. 遗产",
    "awe": "vt. 使惊叹，使敬畏；n. 敬畏，惊叹",
    "civilization": "n. 文明；社会文明；文明社会，文明世界",
    "preserve": "vt. 维护，保护，保存；维持",
    "urgent": "adj. 紧急的，紧迫的；催促的，急切的",
    "wear down": "（使）磨损，（使）逐渐磨平",
    "pyramid": "n. 金字塔",
    "ruin": "vt. 破坏，毁坏；使破产，毁灭；n. 毁坏，破产；残垣断壁",
    "incredible": "adj. 极好的，极大的；不能相信的，难以置信的",
    "clay": "n. 黏土，陶土",
    "sculpture": "n. 雕像，雕塑品；雕刻术",
    "missile": "n. 导弹",
    "violence": "n. 暴力，暴行；狂热，激情",
    "conflict": "n. 冲突，战斗；争论；矛盾，不一致；vi. 冲突，抵触",
    "civil": "adj. 国民的；国家的；民事的",
    "status": "n. 身份，地位；状况，情形",
    "wear and tear": "（正常使用造成的）磨损，损耗",
    "internal": "adj. 内部的；国内的",
    "outcome": "n. 结果，效果",
    "reef": "n. 礁，礁脉",
    "coral": "n. 珊瑚；adj. 珊瑚色的",
    "ecology": "n. 生态，生态学",
    "agenda": "n. 计划，方案；议程表，议事日程",
    "pagoda": "n. 佛塔",
    "nail": "n. 钉子；指甲；vt. 固定",
    "panel": "n. 专家咨询组，讨论小组；嵌板；仪表盘",
    "specialist": "n. 专家；专科医生；adj. 专业的",
    "assess": "vt. 评估，评定；估算",
    "collapse": "vi. 倒塌，坍塌；昏倒；n. 昏倒；倒塌",
    "consultation": "n. 咨询，商讨；就诊",
    "suspend": "vt. 暂停；悬，挂",
    "division": "n. 分歧；分开，分隔",
    "dam": "n. 水坝",
    "architect": "n. 建筑师；设计师",
    "operator": "n. 操作人员，技工；接线员",
    "incident": "n. 事件；冲突",
    "cooperation": "n. 合作，协作；协助，配合",
    "forecast": "vt. & n. 预测，预报",
    "interrupt": "vt. 打扰，插嘴；使暂停，使中断；vi. 打扰，插嘴",
    "conservation": "n. 保护；保持",
    "motion": "n. 提议，动议；运动；动作",
    "vote": "vt. & vi. 投票，表决；n. 选票；投票",
    "canal": "n. 运河",
    "migration": "n. 迁徙，迁移，移居",
    "legacy": "n. 遗产",
    "splendour": "n. 壮丽，雄伟",
    "reserve": "n. 自然保护区；储备；vt. 预订；预留；保留",
    "basin": "n. 盆地；洗脸盆；盆；流域",
    "intense": "adj. 很大的，十分强烈的；有强烈感情的，热切的；激烈的",
    "primitive": "adj. 简陋的，落后的；原始的，远古的",
    "humble": "vt. 使感到谦卑，使感到自惭；adj. 谦虚的，谦卑的",
    "corridor": "n. 走廊，地带；通道",
    "pursue": "vt. 追求，致力于，执行；追逐",
    "submit": "vt. & vi. 提交，呈递；屈服",
    "emerge": "vi. 出现；暴露；露头",
    "assign": "vt. 指定，指派；分配；确定",
    "take shape": "成形，有了模样",
    "string": "n. 一批，一连串，一系列；线；弦",
    "wool": "n. 毛织物；羊毛",
    "cotton": "n. 棉织物；棉，棉花",
    "cave": "n. 山洞，洞穴",
    "Buddhist": "adj. 佛教的；n. 佛教徒",
    "expansion": "n. 扩展，扩大，膨胀",
    "initiative": "n. 倡议，新方案；主动性",
    "milestone": "n. 重要阶段，里程碑",
    "equator": "n. 赤道",
    "showcase": "n. 展示的场合；玻璃柜台",
    "elsewhere": "adv. 在（或去）别处",
    "entry": "n. 进入；参与，加入；参赛",
    "fee": "n. 费；报酬",
    "ban": "vt. 明令禁止，取缔；n. 禁令"
    // 这是你刚才要加的例子
    // Your words dictionary here
};

let keys = Object.keys(words);
let totalWords = keys.length;
let correctCount = 0;
let wordsAnswered = 0;

function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

shuffle(keys);

function generateQuestion() {
    if (keys.length === 0) {
        document.getElementById('word').textContent = "Quiz Completed!";
        document.getElementById('optionsContainer').style.display = "none";
        return;
    }
    const questionIndex = keys.pop();
    const questionWord = questionIndex;
    const correctAnswer = words[questionWord];
    let options = [];
    let tempKeys = Object.keys(words).filter(key => key !== questionWord);
    shuffle(tempKeys);
    tempKeys = tempKeys.slice(0, 3);
    options = tempKeys.map(key => words[key]);
    options.push(correctAnswer);
    shuffle(options);
    document.getElementById('word').textContent = questionWord.replace('_', ' ');
    document.getElementById('optionA').textContent = 'A: ' + options[0];
    document.getElementById('optionB').textContent = 'B: ' + options[1];
    document.getElementById('optionC').textContent = 'C: ' + options[2];
    document.getElementById('optionD').textContent = 'D: ' + options[3];
    document.getElementById('correct').value = options.indexOf(correctAnswer);
    updateProgress();
}

function checkAnswer(selected) {
    const correct = document.getElementById('correct').value;
    const selectedButton = document.querySelectorAll('.option')[selected];
    if (selected === parseInt(correct)) {
        selectedButton.style.backgroundColor = 'lightgreen';
        document.getElementById('match').play();
        correctCount++;
    } else {
        selectedButton.style.backgroundColor = 'lightcoral';
        document.getElementById('unmatch').play();
    }
    setTimeout(() => {
        selectedButton.style.backgroundColor = 'white';
        wordsAnswered++;
        updateStats();
        generateQuestion();
    }, 1000);
}

function updateProgress() {
    const progressPercent = ((totalWords - keys.length) / totalWords) * 100;
    document.getElementById('progress').style.width = `${progressPercent}%`;
}

function updateStats() {
    const correctRate = ((correctCount / wordsAnswered) * 100).toFixed(1);
    document.getElementById('stats').textContent = `正确个数: ${correctCount} / ${wordsAnswered} (${correctRate}%)`;
}

document.addEventListener('DOMContentLoaded', generateQuestion);
</script>
</head>
<body>
<div id="content">
    <h1>单词交互测试x3u4</h1>
    <p id="word"></p>
    <div id="optionsContainer">
        <button id="optionA" class="option" onclick="checkAnswer(0)"></button>
        <button id="optionB" class="option" onclick="checkAnswer(1)"></button>
        <button id="optionC" class="option" onclick="checkAnswer(2)"></button>
        <button id="optionD" class="option" onclick="checkAnswer(3)"></button>
    </div>
    <div id="progressBar">
        <div id="progress"></div>
    </div>
    <div id="stats"></div>
    <input type="hidden" id="correct">
</div>
<audio id="match" src="match.wav"></audio>
<audio id="unmatch" src="unmatch.wav"></audio>
</body>
</html>
